<!DOCTYPE html> <!-- 告诉浏览器这个网页是H5的超文本标记语言 -->
<html lang="zh-CN"> <!-- 表示当前网站属于哪种语言的网站：en(英文)、zh(中文), 默认en, CN代表国家代码、具体详情参考：https://www.w3school.com.cn/tags/html_ref_country_codes.asp -->
<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 移动端、游览器完美视口比列 -->


    <title>H5新标签</title> <!-- title标签的内容会同时也会作为搜索引擎中标题出现 -->
    <link href="../imgs/keai.gif" rel="shortcut icon"> <!-- 图标 -->
    <meta name="author" content="段永红">   <!-- 作者 -->
    <!-- 
        meta主要用于设置网页中的一些元数据, 元数据不是给用户看
        charset 指定网页的字符集
        name 指定数据的key
        content 指定数据的value
                keywords: 表示网站的关键字(搜索引擎根据content关键字进行搜索),多个关键字逗号隔开
                description: 网站描述,描述会显示在搜索引擎的搜索结果中
     -->
    <meta name="keywords" content="HTML5,前端,css3"/>
    <meta name="description" content="一个非常不错的网站"/>

    <!-- 3秒钟会自动重定向跳转到百度 -->
    <!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -->
     

    <style>
        /* 针对标签添加样式、多个标签逗号隔开 */
        header, section, footer, aside, nav, main, article, figure {
            display: block; /* 在IE9中,需要把这些元素转换为块级元素 */
            /*
            height: 30px;
            background-color: red; 背景色
            margin: 10px;
            */
        }

        button {
            cursor: pointer; /* 按钮变小手 */
        }

        /* 
            css3属性选择器案例1： 
            1.使用方式1：button[disabled] {} 选择具有disabled元素的
            2.使用方式2：button[disabled="disabled"] {} 选择disabled="disabled"的元素
            3.使用方式3：button[testName^="val"] {} 选择匹配具有testName属性、并且以val开头的button元素
            4.使用方式4：button[testName$="val"] {} 选择匹配具有testName属性、并且以val结尾的button元素
            5.使用方式5：button[testName*="val"] {} 选择匹配具有testName属性、并且中含有val的button元素
        */
        button[disabled] { /*在按钮被禁用的情况下设置样式*/
            cursor: default; /*将按钮恢复默认箭头*/
        }
        
        /*
            css3属性选择器案例2：
            1. first-child  选择第一个元素
            2. last-child   选择最后一个元素
            3. nth-child(4) 指定选择第4个元素
        */
        ul li:nth-child(4) {
            background-color: aqua;
        }

        /*伪选择器、可以直接向元素内部写入内容*/
        p::after {
            content: '你好啊'; 
        }

       
    </style>
</head>
<body>
    <a href="#bottom">去底部</a>

    <header>header(头部标签)
        <nav>nav(导航栏标签)</nav>
    </header>
    <main>主题区域标签、主要内容区, 一个页面中main仅能使用一次    
    <article>article(内容(文章)标签)</article>
    <section>section(区块标签)跟div相思、可以使用它替代div</section>
    <aside>aside(侧边栏标签)</aside>
    <footer>footer(尾部标签)</footer>
    </main>
    
    <hr/>
    <section>
        <span>form表单input属性：</span>
        <!-- 
            input属性：
                id: id
                name: name
                type: 类型
                value: 默认参数
                required: 必填
                placeholder: 占位符提示、如：请输入文本(必填)
                autofocus: 自动聚焦、页面刷新完成后光标自动选择到指定表单input里、多个默认第一个 
                autocomplete: on|off  开启自动提示默认(no), 前提要有name属性才可生效
                disabled 表单禁用、数据禁止修改、但数据不会被提交
                readonly 表单只读、数据禁止修改、但数据会被提交
        -->
        <form id="form1" action="" style="border: 1px solid red; width: 1000px;" method="post" enctype ="multipart/form-data">  
            <label for="userName">普通文本内容:<!-- for="userName" 作用是点击标题焦点会到 input 对应的 id="userName"中，如果input在label标签内for可以忽略 -->
<input id="userName" name="userName" type="text" required="required" placeholder="请输入文本" autocomplete="on"><br> <!-- 文本格式输入、required(必填) -->
           </label>
            密码框：<input type="password" name="userPassword" autocomplete="off"><br>
            单选：<input type="radio" name="sex" value="男" checked><input type="radio" name="sex" value="女"><br>
            多选：<input type="checkbox" name="checkboxName" value="1">
                <input type="checkbox" name="checkboxName" value="2">
                <input type="checkbox" name="checkboxName" value="3"><br/>
            下拉框：
            <select name="selectName" id="selectId">
                <option value="1">选项一</option>
                <option selected value="2">选项二</option> <!-- selected 默认选择 -->
                <option value="3">选项三</option>
            </select><br>
            邮箱: <input type="email"/><br> <!-- 邮箱格式输入、格式不对会在提交的时候自动提示, 后面的标签同理 -->
            url:  <input type="url"><br> <!-- url格式输入 -->
            年月:  <input type="month"><br> <!-- month格式选择 -->
            年月日:  <input type="date"><br> <!-- date格式选择 -->
            时间:  <input type="time"><br> <!-- time格式选择 -->
            年月日时间:  <input type="datetime-local"><br> <!-- datetime-local格式选择 -->
            文件选择(支持多选):  <input type="file" multiple="multiple"><br> <!-- 文件格式选择 -->
            
            按每年的第N个周:  <input type="week"><br> <!-- 按第N个周格式选择 -->
            整数:  <input type="number" min="0" max="10"><br> <!-- 整数格式输入、同时也可以控制整数的范围 -->
            电话:  <input type="tel"><br> <!-- 电话式输入 -->            
            搜索框:  <input type="search"><br> <!-- 搜索框格式 -->
            颜色选择:  <input type="color"><br> <!-- 颜色选择格式 -->
            <input type="image" src="/helloworld_html5/imgs/button.png" width="40px" style="position: relative; left: 2px; top: 4px;" alt="图片按钮">
            <button type="submit" formaction="#" formenctype="multipart/form-data" formmethod="post">submit(已管理员提交)</button>  <!-- formaction 重新改变局部提交地址 -->
            <input type="submit" formtarget="_blank" value="提交到新窗口/标签页">
            <button type="button">button(提交)</button>
            <input type="button" disabled value="button(提交被禁用的按钮)">       
        </form>
        <input type="reset" value="重置" form="form1">   <!-- form:input框在外面也可以通过form知道id -->
    </section>

    <hr/>
    <section>
        <span>css3选择器：</span>
        <!-- 快速生成：ul>li{$}*10 -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </section>

    <hr/>
    <section>
        <span>css3伪选择器选择器：</span>
        <p></p>
    </section>
    <a id="bottom" href="#">回到顶部</a>

    
</body>
</html>